import { EllipsisOutlined, PlusOutlined } from "@ant-design/icons";
import { ProTable, TableDropdown } from "@ant-design/pro-components";
import { Button, Dropdown, Menu, Space, Tag,Image } from "antd";
import React, { useRef } from "react";
import { artGet } from "../../api/course";
const columns = [
  {
    dataIndex: "index",
    valueType: "indexBorder",
    width: 48,
  },
  {
    title: "课程标题",
    dataIndex: "artname",
    copyable: true,
    ellipsis: true,
    tip: "标题过长会自动收缩",
    formItemProps: {
      rules: [
        {
          required: true,
          message: "此项为必填项",
        },
      ],
    },
  },
  {
    // disable: true,
    title: "课程状态",
    dataIndex: "online",
    filters: true,
    onFilter: true,
    ellipsis: true,
    valueType: "select",
    search:false,
    valueEnum: {
      all: { text: "超长".repeat(50) },
      open: {
        text: "火热售卖",
        status: "Error",
      },
      closed: {
        text: "已经下架",
        status: "Success",
        disabled: true,
      },
    },
    render: (online) => {
      let color = online ? "cyan" : "grey";
      let text = online ? "火热售卖" : "已经下架";
      return <Tag color={color}>{text}</Tag>;
    },
  },
  {
    title: "课程简介",
    dataIndex: "artintro",
    copyable: true,
    ellipsis: true,
    tip: "简介过长会自动收缩",
    formItemProps: {
      rules: [
        {
          required: true,
          message: "此项为必填项",
        },
      ],
    },
  },
  {
    title: "课程价格",
    key: "price",
    dataIndex: "price",
    valueType: "price",
    sorter: true,
    hideInSearch: true,
  },
  {
    title: "课程封面",
    dataIndex: "poster",
    search:false,  //从查询表单中隐藏这个选项
    render: (poster) => <Image height={80} src={poster} />,
  },
  {
    title: "操作",
    valueType: "option",
    key: "option",
    render: (text, record, _, action) => [
      <a
        key="editable"
        onClick={() => {
          var _a;
          (_a =
            action === null || action === void 0
              ? void 0
              : action.startEditable) === null || _a === void 0
            ? void 0
            : _a.call(action, record.id);
        }}
      >
        编辑
      </a>,
      <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
        查看
      </a>,
      <TableDropdown
        key="actionGroup"
        onSelect={() =>
          action === null || action === void 0 ? void 0 : action.reload()
        }
        menus={[
          { key: "copy", name: "复制" },
          { key: "delete", name: "删除" },
        ]}
      />,
    ],
  },
];
const menu = (
  <Menu
    items={[
      {
        label: "1st item",
        key: "1",
      },
      {
        label: "2nd item",
        key: "1",
      },
      {
        label: "3rd item",
        key: "1",
      },
    ]}
  />
);
export default () => {
  const actionRef = useRef();
  return (
    <ProTable
      columns={columns}
      actionRef={actionRef}
      cardBordered
      request={async (params = {}, sort, filter) => {
        // console.log(params,sort, filter);
        let res = await artGet(params,sort,filter);
        console.log(res);
        let {results} = res.data
        return {
          data: results, //这个data会给ProTable内部进行列表渲染
          success: true,
        };
      }}
      editable={{
        type: "multiple",
      }}
      columnsState={{
        persistenceKey: "pro-table-singe-demos",
        persistenceType: "localStorage",
        onChange(value) {
          console.log("value: ", value);
        },
      }}
      rowKey="objectId"
      search={{
        labelWidth: "auto",
      }}
      options={{
        setting: {
          listsHeight: 400,
        },
      }}
      form={{
        // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
        syncToUrl: (values, type) => {
          if (type === "get") {
            return Object.assign(Object.assign({}, values), {
              created_at: [values.startTime, values.endTime],
            });
          }
          return values;
        },
      }}
      pagination={{
        pageSize: 5,
        onChange: (page) => console.log(page),
      }}
      dateFormatter="string"
      headerTitle="高级表格"
      toolBarRender={() => [
        <Button key="button" icon={<PlusOutlined />} type="primary">
          新建
        </Button>,
        <Dropdown key="menu" overlay={menu}>
          <Button>
            <EllipsisOutlined />
          </Button>
        </Dropdown>,
      ]}
    />
  );
};
